<#assign idColumn=table.idColumn>
<#assign idTypeName=idColumn.javaType.simpleName>
<#assign sortColumn = table.modelType.getColumn("sort")>
<#assign parentColumn = table.modelType.getColumn("parent")>
<#assign pathColumn = table.modelType.getColumn("path")>
<#assign createdDateColumn = "created_date">
<#assign lastModifiedDateColumn = "last_modified_date">

<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/WEB-INF/views/common/include/commons-page-head.jsp" %>
</head>

<body class="no-skin" js-page-menu="input-page-menu">
<%@ include file="/WEB-INF/views/common/include/commons-page-navbar.jsp" %>
<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>
    <%@ include file="/WEB-INF/views/common/include/commons-page-sidebar.jsp" %>
    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="#" title="首页">首页</a>
                    </li>
                    <li class="active"></li>
                </ul>
            </div>
            <div class="page-content">
                <div class="page-header">
                    <h1>
                        Dashboard
                        <small>
                            <i class="ace-icon fa fa-angle-double-right"></i>
                            overview &amp; stats
                        </small>
                    </h1>
                </div>
                <div class="row">
                    <div class="col-sm-2">
                        <ul class="js-navTree-wrapper ztree" style="margin-top:0; width:auto; height: 200px;"></ul>
                    </div>
                    <div class="col-sm-10">
                        <%-- search bar--%>
                        <div class="row js-searchBar-wrapper">
                            <div class="col-sm-8">
                                <form role="form">
                                <#list table.columnsWithoutPrimaryKey as column>
                                    <#if (column.name!=parentColumn.name && column.name!=pathColumn.name && column.name!=sortColumn.name && column.name!=createdDateColumn && column.name!=lastModifiedDateColumn)>
                                       <input type="hidden" class="js-search-condition" property="${column.property}"
                                              for="${column.property}" value="like '%?0%'">
                                    </#if>
                                </#list>
                                <div class="row">
                                <#assign i=0/>
                                <#list table.columnsWithoutPrimaryKey  as column>
                                    <#if (column.name!=parentColumn.name && column.name!=pathColumn.name && column.name!=sortColumn.name && column.name!=createdDateColumn && column.name!=lastModifiedDateColumn)>
                                        <#if (i>0 && i % 3 == 0)>
                                    </div>
                                    <div class="row js-more-conditions" style="display: none;">
                                        </#if>
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <div class='input-group'>
                                                    <span class="input-group-addon">${column.label}</span>
                                                    <input type='text' class="form-control" name="${column.property}"/>
                                                </div>
                                            </div>
                                        </div>
                                        <#assign i++/>
                                    </#if>
                                </#list>
                                </div>
                                </form>
                            </div>
                            <div class="col-sm-4">
                                <button class="btn btn-sm btn-primary js-button-search">搜索</button>
                                <button class="btn btn-sm btn-default js-button-reset">重置</button>
                            <#if (i > 3)>
                                <button class="btn btn-sm btn-success js-button-more">
                                    <span class="glyphicon glyphicon-chevron-up"></span>
                                    <span class="glyphicon glyphicon-chevron-down" style="display: none"></span>
                                </button>
                            </#if>
                            </div>
                        </div>

                        <%-- data table --%>
                        <div class="row js-dataTable-wrapper">
                            <div class="col-sm-12">
                                <%-- operation button --%>
                                <div style="margin-bottom: 2px;">
                                    <button class="btn btn-xs btn-success js-button-create">
                                        <span class="glyphicon glyphicon-plus"></span>
                                        新增
                                    </button>
                                    <button class="btn btn-xs btn-danger js-button-delete">
                                        <span class="glyphicon glyphicon-trash"></span>
                                        删除
                                    </button>
                                    <button class="btn btn-xs btn-primary js-button-move" direction="up">上移</button>
                                    <button class="btn btn-xs btn-primary js-button-move" direction="down">下移</button>
                                    <button class="btn btn-xs btn-primary js-button-move" direction="top">置顶</button>
                                    <button class="btn btn-xs btn-primary js-button-move" direction="bottom">置底</button>
                                    <div class="btn-group js-button-page">
                                        <button data-toggle="dropdown"
                                                class="btn btn-xs btn-primary btn-white dropdown-toggle"
                                                style="padding: 5px">
                                            分页<i class="ace-icon fa fa-angle-down icon-on-right"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li class="active"><a href="#">10</a></li>
                                            <li><a href="#">20</a></li>
                                            <li><a href="#">50</a></li>
                                            <li><a href="#">100</a></li>
                                            <li><a href="#">全部</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <%-- common columns(view and update) --%>
                                <div style="display: none">
                                    <div class="js-check-column">
                                        <div class="center">
                                            <label class="pos-rel">
                                                <input type="checkbox" class="ace"/> <span class="lbl"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="js-accordion-column">
                                        <span class="glyphicon glyphicon-chevron-up js-button-accordion"></span>
                                    </div>
                                    <div class="js-action-column">
                                        <div class="js-no-click">
                                            <button class="btn btn-xs btn-default js-button-view">查看</button>
                                            <button class="btn btn-xs btn-success js-button-update"
                                                    style="margin-left: 5px">编辑
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <%-- data table --%>
                                <div>
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th class="center" style="width: 10%">
                                                <label class="pos-rel">
                                                    <input type="checkbox" class="ace"/>
                                                    <span class="lbl"></span>
                                                </label>
                                            </th>
                                            <#list table.columnsWithoutPrimaryKey as column>
                                                <#if (column.name != parentColumn.name && column.name!=pathColumn.name && column.name!=sortColumn.name)>
                                                    <th>${column.label}</th>
                                                </#if>
                                            </#list>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <%-- 弹出框（新增） --%>
                        <div role="dialog" class="modal js-dialog-create" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <%-- header --%>
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h5 class="blue bigger">新增</h5>
                                    </div>
                                    <%-- body --%>
                                    <div class="modal-body">
                                        <form class="js-form-add" role="form" action="${'$\{'}ctx}/${table.viewUrl}"
                                              method="post" enctype="application/json;charset=utf-8">
                                        <#list table.columnsWithoutPrimaryKey as column>
                                            <#if (column.name!=pathColumn.name && column.name!=sortColumn.name && column.name!=createdDateColumn && column.name!=lastModifiedDateColumn)>
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <span class="input-group-addon">${column.label}</span>
                                                            <#if column.name!=parentColumn.name>
                                                                <input type="text" class="form-control"
                                                                       name="${column.property}" required>
                                                            <#else>
                                                                <input type="hidden" name="${parentColumn.property}">
                                                                <input type="text" class="form-control erp-input-tree"
                                                                       data-options="url:'${'$\{'}ctx}/${table.viewUrl}',treeId:'create_parent_tree'"
                                                                       for="${parentColumn.property}" readonly required>
                                                            </#if>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            </#if>
                                        </#list>
                                        </form>
                                    </div>
                                    <%-- footer --%>
                                    <div class="modal-footer">
                                        <button class="btn btn-sm" data-dismiss="modal">
                                            <i class="ace-icon fa fa-times"></i>
                                            取消
                                        </button>

                                        <button class="btn btn-sm btn-primary js-button-save">
                                            <i class="ace-icon fa fa-check"></i>
                                            保存
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="js-tree-wrapper">
                                <ul id="create_parent_tree" class="ztree"
                                    style="margin-top:0; width:auto; height: 200px;"></ul>
                            </div>
                        </div>

                        <%-- 弹出框（修改） --%>
                        <div role="dialog" class="modal js-dialog-update" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <%-- header --%>
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h5 class="blue bigger">修改</h5>
                                    </div>
                                    <%-- body --%>
                                    <div class="modal-body">
                                        <form class="js-form-update" role="form" action="${'$\{'}ctx}/${table.viewUrl}"
                                              method="put" enctype="application/json;charset=utf-8">
                                            <input type="hidden" name="${idColumn.property}">
                                            <#list table.columnsWithoutPrimaryKey as column>
                                                <#if (column.name!=pathColumn.name && column.name!=sortColumn.name && column.name!=createdDateColumn && column.name!=lastModifiedDateColumn)>
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <div class="input-group">
                                                                    <span class="input-group-addon">${column.label}</span>
                                                                    <#if column.name!=parentColumn.name>
                                                                        <input type="text" class="form-control"
                                                                               name="${column.property}" required>
                                                                    <#else>
                                                                        <input type="hidden"
                                                                               name="${parentColumn.property}">
                                                                        <input type="text"
                                                                               class="form-control erp-input-tree"
                                                                               data-options="url:'${'$\{'}ctx}/${table.viewUrl}',treeId:'update_parent_tree'"
                                                                               for="${parentColumn.property}" readonly
                                                                               required>
                                                                    </#if>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </#if>
                                            </#list>
                                        </form>
                                    </div>
                                    <%-- footer --%>
                                    <div class="modal-footer">
                                        <button class="btn btn-sm" data-dismiss="modal">
                                            <i class="ace-icon fa fa-times"></i>
                                            取消
                                        </button>

                                        <button class="btn btn-sm btn-primary js-button-save">
                                            <i class="ace-icon fa fa-check"></i>
                                            保存
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="js-tree-wrapper">
                                <ul id="update_parent_tree" class="ztree"
                                    style="margin-top:0; width:auto; height: 200px;"></ul>
                            </div>
                        </div>
                        <%-- 弹出框（查看） --%>
                        <div role="dialog" class="modal js-dialog-view" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <%-- header --%>
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h5 class="blue bigger">详情</h5>
                                    </div>
                                    <%-- body --%>
                                    <div class="modal-body">
                                        <form class="js-form-view" role="form">
                                            <#list table.columnsWithoutPrimaryKey as column>
                                                <#if (column.name!=pathColumn.name && column.name!=sortColumn.name)>
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <div class="input-group">
                                                                    <span class="input-group-addon">${column.label}</span>
                                                                    <input type="text" class="form-control"
                                                                           name="${column.property}" readonly>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </#if>
                                            </#list>
                                        </form>
                                    </div>
                                    <%-- footer --%>
                                    <div class="modal-footer">
                                        <button class="btn btn-sm" data-dismiss="modal">
                                            <i class="ace-icon fa fa-times"></i>
                                            关闭
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%@ include file="/WEB-INF/views/common/include/commons-page-footer.jsp" %>
</div>

<%@ include file="/WEB-INF/views/common/include/commons-js.jsp" %>
<%@ include file="/WEB-INF/views/common/include/commons-plugins-js.jsp" %>
<script src="${'$\{'}ctx}/resources/scripts/${table.viewUrl}.js"></script>
</body>
</html>
